<template>
    <div>
        <div style="text-align: left">
            <!--模糊查询-->
            <el-form :inline="true" :model="caipinInfo" class="demo-form-inline">
                <el-form-item label="菜名">
                    <el-input v-model="caipinInfo.dishName" placeholder="菜名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button type="primary" @click="nullinfo">重置</el-button>
                </el-form-item>
            </el-form>
        </div>,
        <div style="text-align: left"><el-button type="primary" @click="insertcai">添加</el-button></div>


        <!--表格-->
        <el-table
                :data="tableData"
                style="width: 100%"
                >
            <el-table-column
                    prop="mid"
                    label="id"
                    width="100px">
            </el-table-column>
            <el-table-column
                    prop="dishName"
                    label="菜名"
                    width="200px">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格"
                     width="150px">
            </el-table-column>
            <el-table-column
                    prop="addCheckData.url"
                    label="商品图片"
            >
                <template slot-scope="scope">
                    <img :src="scope.row.menuImg" style="width: 100px;height: 100px"/>
                </template>
            </el-table-column>
            <el-table-column
                    prop="cookstyle.style"
                    label="菜系"
                    width="200px">
            </el-table-column>
            <el-table-column
                    prop="restaurant.restaurantName"
                    label="餐厅"
                    width="200px">
            </el-table-column>
            <el-table-column
            label="操作"
            width="400px">
            <template slot-scope="scope">
                <el-button type="danger" round @click="delectId(scope.row.mid)" size="small">删除</el-button>
                <el-button type="warning" round @click="update(scope.row)" size="small">修改</el-button>
                <el-button type="warning" round @click="collect(scope.row.mid)"  size="small">收藏</el-button>
                <!--<el-button type="warning" round @click="goods(scope.row.mid)"  size="small">加入购物车</el-button>-->
            </template>
            </el-table-column>
        </el-table>

        <!--编辑弹出框-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                >
            <span>

                <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                  <el-form-item label="菜品名字">
                    <el-input v-model="formLabelAlign.dishName"></el-input>
                  </el-form-item>
                  <el-form-item label="价格">
                    <el-input v-model="formLabelAlign.price"></el-input>
                  </el-form-item>
                  <el-form-item label="剩余数量">
                    <el-input v-model="formLabelAlign.number"></el-input>
                  </el-form-item>

                     <el-form-item label="头像" prop="username">
                        <el-upload
                                class="avatar-uploader"
                                action="http://192.168.1.37:7000/upload/upload"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess1"
                        >
                            <img v-if="formLabelAlign.menuImg" :src="formLabelAlign.menuImg" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                     </el-form-item>

                </el-form>

            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateq">确 定</el-button>
            </span>
        </el-dialog>

        <!--删除弹出框-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible2"
                width="30%"
                >
            <span>确定删除？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="delectMidq">确 定</el-button>
            </span>
        </el-dialog>

        <!--添加弹出框-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible3"
                width="30%"
                >
            <span>
                <el-form :label-position="labelPosition" ref="insertcaidan" label-width="80px" :model="insertcaidan" :rules="rules">
                  <el-form-item label="菜名" prop="dishName">
                    <el-input v-model="insertcaidan.dishName"></el-input>
                  </el-form-item>
                  <el-form-item label="价格" prop="price">
                    <el-input v-model="insertcaidan.price"></el-input>
                  </el-form-item>
                  <el-form-item label="后缀" prop="unit">
                    <el-input v-model="insertcaidan.unit"></el-input>
                  </el-form-item>
                     <el-form-item label="数量" prop="number">
                    <el-input v-model.number="insertcaidan.number"></el-input>
                     </el-form-item>

                  <el-form-item label="菜系">
                    <el-form-item label="选择菜系" prop="cid">
                        <el-select v-model="insertcaidan.cid" placeholder="名称">
                            <el-option v-for="u in cookstyle" :label="u.style" :value="u.cid"></el-option>
                        </el-select>
                    </el-form-item>
                  </el-form-item>

                  <el-form-item label="头像">
                        <el-upload
                                class="avatar-uploader"
                                action="http://192.168.1.37:7000/upload/upload"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess2"
                        >
                            <img v-if="insertcaidan.menuImg" :src="insertcaidan.menuImg" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                  </el-form-item>

                    <el-form-item label="菜品介绍">
                    <el-input v-model="insertcaidan.instroduce"></el-input>
                  </el-form-item>

                    <el-form-item label="餐厅">
                        <el-form-item label="选择餐厅" prop="rid">
                        <el-select v-model="insertcaidan.rid" placeholder="餐厅名称">
                            <el-option v-for="c in restaurant"                                                                                                                    :label="c.restaurantName" :value="c.rid"></el-option>
                        </el-select>
                    </el-form-item>
                  </el-form-item>
                </el-form>

            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible3 = false">取 消</el-button>
                <el-button type="primary" @click="insertq()">确 定</el-button>
            </span>
        </el-dialog>


        <!--分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>
<script>
    export default {
        name: "CookMenu",
        data(){
            const blurText = async(rule, value, callback) => {
                const boolean = new RegExp('^[1-9][0-9]*$').test(value)
                if (!boolean) {
                    this.$message.warning('请输入正整数')
                    this.insertcaidan.number = ''
                }
            }
            return{
                //总页数
                total:0,
                //当前第几页
                currentPage:1,
                //每页显示几条数组
                pageSizes:[5,10,15],
                //默认每页几条记录
                pageSize:5,
                //模糊查询员工信息
                userInfo:{},
                //菜品信息
                tableData:[],
                //编辑弹出框
                dialogVisible:false,
                //修改弹出框的内容
                formLabelAlign:{},
                //表单的对其方式
                labelPosition: 'right',
                //删除弹出框
                dialogVisible2:false,
                //删除id
                mid:0,
                //添加弹出框
                dialogVisible3:false,
                //添加菜单
                insertcaidan:{},
                //菜系信息
                cookstyle:[],
                //餐厅信息
                restaurant:[],
                //模糊查询
                caipinInfo:{},
                //表单校验
                rules:{
                    dishName:[
                        {required: true, message: '请输入菜品名', trigger: 'blur'},
                        {min: 2, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur'}
                    ],
                    price:[
                        { required: true, message: "请输入数量", trigger: "blur" },
                        { validator: blurText,trigger: 'blur' }  //表单验证的时候会调用的方法
                    ],
                    unit:[
                        {required: true, message: '请输入菜品后缀', trigger: 'blur'},
                        {min: 2, max: 6, message: '长度在 1 到 2 个字符', trigger: 'blur'}
                    ],
                    cid:[
                        { required: true, message: '请选择菜系',trigger: 'change'},
                    ],
                    rid:[
                        { required: true, message: '请选择餐厅',trigger: 'change'},
                    ],
                    number:[
                        { required: true, message: "请输入数量", trigger: "blur" },
                        { validator: blurText,trigger: 'blur' }  //表单验证的时候会调用的方法
                    ],
                },

            }
        },
        //页面加载完毕执行
        created(){
            this.caipinall();
            this.allxi();
            this.allrestaurant();
        },
        methods:{
            //加入购物车
         /*   goods(mid){
                this.$http.post("/caipin/caipin/mohuAll?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.caipinInfo).then(result=>{
                    this.tableData=result.data.data.records;
                    console.log(this.tableData)
                    this.total=result.data.data.total;
                });
            },*/
            beforeAvatarUpload(file) {
                let isLt200k = file.size / 1024 < 200;
                if (!isLt200k) {
                    this.$message.error('上传头像图片大小不能超过 200KB!');
                    return isLt200k;
                }
                this.addForm.photo = file;
            },
            httpRequest (data) {
                let _this = this
                let rd = new FileReader() // 创建文件读取对象
                let file = data.file
                rd.readAsDataURL(file) // 文件读取装换为base64类型
                rd.onloadend = function (e) {
                    _this.imageUrl = this.result // this指向当前方法onloadend的作用域
                }
            },
            //修改头像
            handleAvatarSuccess1(res, file) {
                this.formLabelAlign.menuImg = res.data;
            },
            //点击使用模糊查询
            onSubmit(){
                this.$http.post("/caipin/caipin/mohuAll?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.caipinInfo).then(result=>{
                    this.tableData=result.data.data.list;
                    console.log(result)
                    this.total=result.data.data.total;
                });
            },
            //头像上传成功的  添加
            handleAvatarSuccess2(res, file) {
                this.insertcaidan.menuImg = res.data;
            },
            //查询所有的餐厅
            allrestaurant(){
                this.$http.get("/caipin/caipin/allcan").then(result=>{
                    this.restaurant=result.data.data;
                })
            },
            //查询所有的菜系
            allxi(){
                this.$http.get("/caipin/caipin/allxi").then(result=>{
                    this.cookstyle=result.data.data;
                })
            },
            //条数发生改变时.
            handleSizeChange(val) {
                this.pageSize=val;
                this.caipinall();
            },
            //页码发生改变
            handleCurrentChange(val) {
                this.currentPage=val;
                this.caipinall();
            },
            //添加确定按钮
            insertq(){
                this.$refs["insertcaidan"].validate((valid) => {
                    if (valid) {
                        this.$http.post("/caipin/caipin/insertcai", this.insertcaidan).then(result => {
                            this.$message.success(result.data.msg);
                            this.dialogVisible3 = false;
                            this.caipinall();
                            this.insertcaidan = {};
                        })
                    }
                })
            },
            //添加按钮
            insertcai(){
                this.dialogVisible3=true;
            },
            //确认删除
            delectMidq(){
                this.dialogVisible2=false;
                this.$http.post("/caipin/caipin/delectByid?mid="+this.mid).then(result=>{
                    this.caipinall();
                })
            },
            //删除按钮
            delectId(mid){
                this.mid=mid;
                this.dialogVisible2=true;
            },
            //确认修改
            updateq(){
                this.dialogVisible=false;
                this.$http.post("/caipin/caipin/update",this.formLabelAlign).then(result=>{
                    //修改成功提示
                    this.$message.success(result.data.msg);
                    this.caipinall();
                })
            },
            update(row){
                this.formLabelAlign=row;
                this.dialogVisible=true;
            },
            //清空查询条件
            nullinfo(){
                this.caipinInfo={};
                this.caipinall();
            },
            //查询菜品信息
            caipinall(){
                //如果传递得参数为json格式 那么必须为post提交
                this.$http.post("/caipin/caipin/caiFindAll?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(result=>{
                    this.tableData=result.data.data.list;
                    console.log(result)
                    this.total=result.data.data.total;
                });
            },
            //收藏
            collect(mid){
                var token = sessionStorage.getItem("token");
                this.$http.post("/caipin/caipin/selectInsert?mid="+mid+"&token="+token).then(result=>{
                    this.$message.success(result.data.msg);
                });
            },
            insert(){

            }
        }
    }
</script>

<style scoped>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>